<template>
	<view class="mobile-write-offs">
		<!-- <nav-bar title="移动核销" :color="navBarColor" :bg="navBarBg" /> -->
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		<view class="section_2">
			<u-row>
				<u-col :span="6">
					<view class="box flex-center flex-column" @click="offslist(1)">
						<!-- <navigator url="/page_admin/mobile-write-offs/write-offs-list/write-offs-list?add=1"
							class="box flex-center flex-column"> -->
						<view class="value">0</view>
						<view class="label">今日核销</view>
						<!-- </navigator> -->
					</view>

				</u-col>
				<u-col :span="6">
					<view class="box flex-center flex-column" @click="offslist(2)">
						<view class="value">0</view>
						<view class="label">历史核销</view>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="section_3">
			<u-row>
				<u-col :span="6">
					<view class="box box1 flex-center" @click="scanCode">
						<image style="width: 74rpx;height: 74rpx;" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250737327604611.png" mode=""></image>
						<!-- <u-image width="74rpx" height="74rpx"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250737327604611.png" /> -->
						<view class="name">扫码刷卡</view>
					</view>
				</u-col>
				<u-col :span="6">
					<!-- <navigator url="/page_admin/mobile-write-offs/retrieval-write-offs/retrieval-write-offs"
						class="box box2 flex-center"> -->
					<view class="box box2 flex-center" @click="retrievallist">
						<u-image width="74rpx" height="74rpx"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250747037715598.png" />
						<view class="name">检索核销</view>
					</view>
					<!-- </navigator> -->
				</u-col>
			</u-row>
		</view>

		<view class="section_4">
			<!-- <u-image width="100%" height="80rpx"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250736010467427.png" /> -->
			<text>检索核销仅支持手机号/卡号检索,如有疑问，请咨询技术人员。</text>
		</view>

		<view class="list">
			<view class="title flex-align">今日记录</view>

			<!-- <navigator v-for="item in 10" :key="item" class="item"
				url="/page_admin/mobile-write-offs/write-offs-detail/write-offs-detail"> -->
			<view v-for="(item,index) in 5" :key="index" class="item">
				<view class="flex-space-between">
					<view class="user-name">15651039888</view>
					<view class="name">小明</view>
				</view>
				<view class="flex-space-between" style="margin-top: 20rpx;">
					<view class="date">2024-1-22</view>
					<view class="value">-1</view>
				</view>
			</view>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script>
	// import navbar from '@/mixins/navbar.js';
	const index = require("@/api/index/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		// mixins: [navbar({
		// 	navBarColor: '#fff'
		// })],
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#ffffff",
					},{
					type: "text",
					text: "移动核销",
					width: 70,
					weight: "bold",
					color: "#ffffff",
					textAlign: "left",
				}, ],
				src: "",
				listQuery: { //分页
					pageSize: 8,
					page: 1,
				},
				totalPage: "",
				ordersList: [],
				total_num: '',
				total_count: ''
			}
		},
		onLoad(options) {},
		onShow() {
			// this.today()
			// this.comsume_index()
		},

		methods: {
			offslist(type) {
				console.log(type, '121')
				uni.navigateTo({
					url: './write-offs-list/write-offs-list?type=' + type
				})
			},
			// 历史核销
			async comsume_index() {
				let data = {
					page: this.listQuery.page,
					pageSize: this.listQuery.pageSize,
				};
				let res = await index.comsume_index(data);
				if (res.code == 1) {
					this.total_num = res.data.total
				}
			},
			async today() {
				let that = this;
				if (this.listQuery.page === 1) that.ordersList = [];
				let data = {
					page: this.listQuery.page,
					pageSize: this.listQuery.pageSize,
				};
				let res = await index.today(data);
				if (res.code == 1) {
					that.ordersList = that.ordersList.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
					that.total_count = res.data.total_count
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.today()
			},
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res, '78')
						if (res.result) {
							console.log(res.result, '99')
							// 这是码
							const val = res.result;
							if (res.result != '') {
								uni.navigateTo({
									url: './confirm-write-offs/confirm-write-offs?val=' +
										res.result + "&op=" + 1
								})
							}
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			// 检索核销
			retrievallist(){
				uni.navigateTo({
					url:'./retrieval-write-offs/retrieval-write-offs?op=' + 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mobile-write-offs {
		background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250731809043173.png') left top/100% auto no-repeat;
		min-height: 100vh;
		padding: 0 20rpx;
		padding-bottom: 40rpx;

		.section_2 {
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			margin-top: 30rpx;

			.box {
				height: 141rpx;
			}

			.value {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 25rpx;
			}

			.label {
				margin-top: 15rpx;
				color: rgb(136, 136, 136);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 27rpx;
			}
		}

		.section_3 {
			margin-top: 20rpx;
			color: #fff;
			font-weight: bold;
			font-size: 38rpx;

			.box {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 140rpx;
			}

			.box1 {
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250733283775686.png');
				// width: 40vw;
				// background-repeat: no-repeat;
				// background-size: 100% 100%;
			}

			.box2 {
				// width: 40vw;
				// background-repeat: no-repeat;
				// background-size: 100% 100%;
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250734611354178.png');
			}

			.name {
				margin-left: 20rpx;
			}
		}

		.section_4 {
			margin: 20rpx 0;
			font-size: 24rpx;
		}

		.list {
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;

			.title {
				padding: 25rpx 30rpx;
				ont-size: 32rpx;
				font-weight: 700;
				line-height: 31rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				&::before {
					content: '';
					display: inline-block;
					background-color: #0E9698;
					border-radius: 3rpx;
					width: 6rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}
			}

			.item {
				font-size: 22rpx;
				padding: 30rpx 20rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				.name {
					color: rgb(136, 136, 136);
				}

				.value {
					color: #0E9698;
					font-size: 24rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>